<template>
    <div class="person">
        <h2>当前求和为：{{ sum }}</h2>
        <button @click="sumPlusOne">点我 sum + 1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

    let sum = ref(0);

    function sumPlusOne() {
        sum.value += 1;
    }

    // 创建阶段，在setup里写的代码就是创建阶段做的事。
    console.log('子--创建');

    // 挂载阶段
    onBeforeMount(() => {
        console.log('子--挂载前');
    });

    onMounted(() => {
        console.log('子--挂载完毕');
    });

    // 更新阶段
    onBeforeUpdate(() => {
        console.log('子--更新前');
    });

    onUpdated(() => {
        console.log('子--更新完毕');
    });

    // 销毁阶段
    onBeforeUnmount(() => {
        console.log('子--卸载前');
    });

    onUnmounted(() => {
        console.log('子--卸载完毕');
    });
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>